<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件处理</title>
    <script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>点击，事件处理：{{msg}}</h2>
        <button v-on:click="showinfo">来点我啊</button>
        <button @click="showinfo2($event,'123s2df21w3321s23d21gqwe')">来点我啊@click</button>
    </div>


    <script type="text/javascript">
        const vm = new Vue({
            el: "#root",
            data() {
                return {
                    msg: "你怎么敢的呀！"
                }
            },
            // 事件回调
            methods:{
                showinfo(event){
                    console.log(event.target.innerText)
                    alert("你怎么敢的呀。")
                    console.log(this) //this == vm
                },
                showinfo2(event, id){
                    console.log(event.target.innerText)
                    alert("你怎么敢的呀。")
                    console.log(this) //this == vm
                    console.log("user id:", id)
                }
            },
        })
    </script>
</body>
</html>